<template>
  <div>
    <!-- 指令使用 -->
    <span>全局指令，自动获取焦点</span>
    <input type="text" v-focus="10" />
    <!-- 动态指令 -->
    <div v-pin:[direction]="10 + 10" class="content">动态指令： v-pin:[direction]="10 + 10"</div>
    <!-- 指令修饰符 -->
    <div v-pin:[direction].foo.bar="100" class="content">指令修饰符：v-pin:[direction].foo.bar="100"</div>
  </div>
</template>

<script>
export default {
  name: "directive",
  data() {
    return {
      direction: "left",
    };
  },
};
</script>

<style lang="stylus" scoped></style>